<template>
  <div>
      
        <!--<div class="times-select">-->
            <!--<p class="times-select-top"><i class="icon icon-tip1"></i>查询日期</p>-->
            <!--<button class="dateBtn dateBegin" @click="picker('start')">{{startDate}}</button>-->
            <!--<span style="margin: 0 0.5rem;">至</span>-->
            <!--<button  class="dateBtn dateEnd" @click="picker('end')"> {{endDate}}</button>-->
            <!--<div>-->
            <!--<select name="" id="" v-model="selected">-->
                <!--<option value="">请选择医疗机构</option>-->
                <!--<option value=""  v-for="item in hispitalList" :value="item.resource.id" :key="item.resource.name">{{item.resource.name}}</option>-->
            <!--</select>-->
            <!--<button class="find" @click="toSearch">查询</button>-->
            <!--</div>-->
        <!--</div>-->
        <div>
            <!-- list组件 -->
            <listExample :listData="list" :type="listType"></listExample>
        </div>
        <div class="load" v-show="isLoad">
            正在加载数据...
        </div>
        <mt-datetime-picker
            ref="picker"
            type="date"
            v-model="pickerValue"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日"
            @confirm="handleConfirm">
        </mt-datetime-picker>
        <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
        <tips :hosName="hosName"></tips>
        <!-- 水印 -->
        <div class="watermark"></div>
  </div>
</template>

<script>
import tips from '@/components/tips.vue'
import { getRISReportListApi} from '@/api/healthRecords'
import listExample from '../../components/list.vue'
import { MessageBox,DatetimePicker } from 'mint-ui';
export default {
    name: 'JCBG',
    data () {
        return {
            list:[
            //     {
            //     title:'上海市第六人民医院',
            //     start:'2018-10-01 11:43',
            //     display:'超声中心'
            // }
            ],  //就诊报告
            hispitalList:[], //医院列表
            selected:'',
            resourceId:'',
            startDate:this.formatDate(new Date()),
            endDate:this.formatDate(new Date()),
            privewLink:'',
            nextLink:'',
            selfLink:'',
            isLoad:false,
            curPage:1,
            total:null,
            listType:'jcbg',
            pickerValue:this.formatDate(new Date()),
            pickerType:'',
            zjhmParamter: JSON.parse(localStorage.getItem('zjhm')),
            hosName:''//医院名称
        }
    },
    watch:{
        selected(val){
            console.log(val)
        },
        pickerValue(val){

        }
    },
    mounted: function() {
    },
    methods:{
        getRISReportList() {
            getRISReportListApi(JSON.stringify(this.zjhmParamter)).then(response => {
                if (response.data.code == 1) {
                    response.data.data.forEach(item => {
                        item.bgrq = item.jzsj;
                        item.bgdlbmc = item.jcks;
                    });
                    this.list = response.data.data;
                }
            })

        },

        getUserInfo(){
            //查询患者信息
            var that = this
            this.$axios.get('http://172.16.31.194/restBoot-web/fhir/Patient?identifier=http://www.shdc.org.cn/fhir/Identifier/card/0|765237146739&_format=json', {

            })
            .then(function (res) {
                res.data.entry.forEach(item=>{
                    that.resourceId = item.resource.id
                    sessionStorage.setItem('hzResourceId',item.resource.id)
                    that.getList(item.resource.id)

                })
            })
            .catch(function (error) {
                // alert('网络出错');
            });
        },
        getHispital(){
            //查询全部医院资源列表交易
            var that = this
            this.$axios.get('http://172.16.31.194/restBoot-web/fhir/Organization?_elements=id,name&_format=json&type= http://hl7.org/fhir/organization-type|prov', {

            })
            .then(function (res) {
                that.hispitalList = res.data.entry
            })
            .catch(function (error) {
            console.log(error);
            });
        },
        getList(id,type){
            //查询检查报告列表
            var that = this
            var startDate  = that.startDate
            var endDate = that.endDate
            this.$axios.get('http://172.16.31.194/restBoot-web/fhir/DiagnosticReport?subject:Patient='+id+'&context:Encounter.service-provider='+that.selected+'&category=0&context:Encounter.date=ge'+startDate+'&context:Encounter.date=lt'+endDate+'&_include=DiagnosticReport:context&_format=json', {

            })
            .then(function (res) {
                var obj = {}
                if(type){
                    that.list = []
                }
                that.total = res.data.total
                var data = res.data.entry
                if(data){
                    data.forEach(obj=>{
                        if(obj.resource.resourceType == 'DiagnosticReport'){
                            that.list.push({display:obj.resource.code.coding[0].display,title:'',start:'',reportId:obj.resource.id})

                        }else if(obj.resource.resourceType == 'Encounter'){
                            that.list.forEach((item,index)=>{
                                that.list[index].title=obj.resource.serviceProvider.display
                                that.list[index].start = obj.resource.period.start
                            })
                        }
                    })
                } else {
                    that.list = []
                }
                if(res.data.link){
                    res.data.link.forEach(item=>{
                        if(item.relation == 'next'){
                            that.nextLink = item.url
                            console.log(that.nextLink)
                        } else if(item.relation == 'selse') {
                            that.selfLink = item.url
                        } else if(item.relation == 'previous'){
                            that.privewLink = item.url
                        }
                    })
                }
            })
            .catch(function (error) {
                // alert('网络出错');
            });
        },
        picker(type){
            this.pickerType = type
            this.$refs.picker.open();

        },
        handleConfirm(val){
            if(this.pickerType =='start') {
                this.startDate = this.formatDate(val)
            } else if(this.pickerType == 'end') {
                this.endDate = this.formatDate(val)
            }
            if(new Date(this.endDate)<new Date(this.startDate)) {
                MessageBox('结束日期不能小于开始日期，请重新选择')
                this.startDate = '请选择日期'
                this.endDate = '请选择日期'
            }

        },
        formatDate(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            return y + '-' + m + '-' + d;
        },
        toSearch(){
            this.getList(this.resourceId,'search')
        },
        vuetouch:function(s,e){
            console.log(s.name)
        },
        load(type){
            var that= this
            var url = ''
            that.curPage++
            if(type== 'pre') {
                url=that.privewLink
            } else {
                url=that.nextLink
            }
            this.$axios.get(url, {
            })
            .then(function (res) {
                var obj = {}
                if(res.data.entry){
                    res.data.entry.forEach((obj,index)=>{
                        if(obj.resource.resourceType == 'DiagnosticReport'){
                            that.list.push({display:obj.resource.code.coding[0].display,title:'',start:'',reportId:obj.resource.id})

                        }else if(obj.resource.resourceType == 'Encounter'){
                            that.list.forEach((item,index)=>{
                                that.list[index].title=obj.resource.serviceProvider.display
                                that.list[index].start = obj.resource.period.start
                            })
                        }
                    })
                } else {
                    that.list = []
                }
                if(res.data.link){
                    res.data.link.forEach(item=>{
                        if(item.relation == 'next'){
                            that.nextLink = item.url
                            console.log(that.nextLink)
                        } else if(item.relation == 'selse') {
                            that.selfLink = item.url
                        } else if(item.relation == 'previous'){
                            that.privewLink = item.url
                        }
                    })
                }
                console.log(that.list)
            })
            .catch(function (error) {
                // alert('网络出错');
            });
        }
    },
    components:{
        listExample,tips
    },
    created(){
        this.getRISReportList()
        // this.getUserInfo()
        // this.getHispital()
        var that = this
//         window.onscroll = function(){
//        		//变量scrollTop是滚动条滚动时，距离顶部的距离
//        		var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//        		//变量windowHeight是可视区的高度
//        		var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//        		//变量scrollHeight是滚动条的总高度
//        		var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
//              //滚动条到底部的条件
//                if(scrollTop+windowHeight==scrollHeight){
//                 that.isLoad = true
//                 //写后台加载数据的函数
//                 if(that.list.length<that.total && that.list.length!=that.total) {
//                     that.load('next')
//                     console.log(that.list.length)
//                     console.log(that.total)
//                 } else {
//                     that.isLoad = false
//                 }

//             }  else {
//                 that.isLoad = false
//             }  
//         }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    select{
        background: #E7F7FC;
        color:#333;
        margin-top:1rem;
        border:none;
        width: 17rem;
        padding:0.5rem;
    }
    .find{
        top:6.7rem
    }
    .null{
        line-height: 6rem;
        background: #fff;
        text-align: center;
    }
    .dateBtn{
        width: 10.5rem;
    }
    .load{
        text-align: center;
        line-height: 4rem;
    }
    .times-select{padding: 1rem;color: #999;background-color: #fff;position: relative;}
    .icon-tip1{background: url('../../assets/images/yygl-blue.png') no-repeat;background-size: 100% 100%;width: 2rem;height: 2rem;
    position: absolute;left: 1rem;top: 1rem;}
    .times-select-top{line-height: 2rem;padding-left: 2rem;margin-bottom: 0.5rem;}
    .dateBtn{background-color: #E7F7FC;border: 0;color: #000;padding: 0.5rem;vertical-align: baseline;}
    .find{background-color: #fff;border: 1px solid #2BBAF5;color: #2BBAF5;
    width: 5rem;right: 2rem;position: absolute;line-height: 2rem;}
    .report-list {margin-top: 1rem;color: #919191;}
    .reportList-li {width: 100%;overflow: hidden;background-color: #fff;margin-bottom: 0.6rem;}
    .reportList-li>p {padding: 0.4rem 1.5rem;position: relative;}
    .reportList-li-bottom:after {content: ' ';position: absolute;height: 1px;
        width: 100%;bottom: 0;background-color: #ddd;left: 0;}
    .reportList-li-right {color: #fff;border-radius: 0.2rem;background-color: #9CCC65;
        padding: 0.4rem 0.8rem;position: absolute;right: 1.5rem;top: 0;text-overflow: ellipsis;
        overflow: hidden;width: 10rem;word-break: break-word;white-space: nowrap;}
    .subject {margin-right: 1rem;}
    .report-list-bottom{line-height: 3rem;}
    .type{color: #000;}
    .icon{display: block;}
    .icon-arrow-right{width: 1rem;height: 1.5rem;background: url('../../assets/images/arrow-right.png') no-repeat;
    background-size: 100% 100%;position: absolute;right: 1rem;top: 50%;transform: translateY(-50%);}
    .hosName{font-size: 1.6rem;color: #000;}
</style>
